import {ViewStyle, StyleSheet, TextStyle, ImageStyle} from 'react-native'
import {translateSize, themeColors, definedColors} from 'styles'

interface TradeListStyle {
  container: ViewStyle
  headerRightContainer: ViewStyle
  headerIcon: ImageStyle
  timeContainer: ViewStyle
  time: TextStyle
  timeUnit: TextStyle
  itemContainer: ViewStyle
  itemTitle: ViewStyle
}

const tradeListStyle = StyleSheet.create<TradeListStyle>({
  container: {
    backgroundColor: themeColors.pageBg,
  },
  headerRightContainer: {
    paddingHorizontal: translateSize(24),
  },
  headerIcon: {
    width: translateSize(40),
    height: translateSize(40),
  },
  timeContainer: {
    paddingVertical: translateSize(40),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: definedColors.white,
  },
  time: {
    fontSize: translateSize(28),
    paddingHorizontal: translateSize(15),
    paddingVertical: translateSize(5),
    fontWeight: 'bold',
    backgroundColor: themeColors.pageBg,
    borderColor: themeColors.divider,
    borderRadius: translateSize(10),
    borderWidth: 1,
  },
  timeUnit: {
    paddingHorizontal: translateSize(15),
    fontSize: translateSize(24),
    color: definedColors.gray66,
  },
  itemContainer: {
    paddingTop: translateSize(32),
    marginTop: translateSize(32),
    backgroundColor: definedColors.white,
  },
  itemTitle: {
    paddingLeft: translateSize(32),
  },
})

interface TradeDetailStyle {
  container: ViewStyle
  titleContainer: ViewStyle
  empty: ViewStyle
  door: TextStyle
  btnContainer: ViewStyle
  btn: ViewStyle
  btnContent: TextStyle
}

const tradeDetailStyle = StyleSheet.create<TradeDetailStyle>({
  container: {
    paddingTop: translateSize(20),
    paddingBottom: translateSize(70),
  },
  titleContainer: {
    paddingTop: translateSize(32),
    paddingLeft: translateSize(32),
  },
  empty: {
    height: translateSize(32),
    backgroundColor: themeColors.pageBg,
  },
  door: {
    fontSize: translateSize(24),
    color: themeColors.title,
    fontWeight: 'bold',
    paddingLeft: translateSize(32),
    paddingTop: translateSize(20),
  },
  btnContainer: {
    marginTop: translateSize(32),
    paddingHorizontal: translateSize(32),
    justifyContent: 'space-between',
  },
  btn: {
    borderRadius: translateSize(8),
    paddingHorizontal: translateSize(90),
    paddingVertical: translateSize(40),
  },
  btnContent: {
    fontSize: translateSize(28),
    color: themeColors.title,
  },
})

export {tradeListStyle, tradeDetailStyle}
